<template>
  <div class="register">
    <span>注册</span>
    <div class="input">
      <input type="text" placeholder="请输入邮箱" v-model="email" />
      <svg class="icon" :class="{ emailerr: emailErr }" aria-hidden="true">
        <use xlink:href="#icon-youjian"></use>
      </svg>
    </div>
    <div class="input">
      <input type="text" placeholder="请输入用户名" v-model="name" />
      <svg class="icon" aria-hidden="true">
        <use xlink:href="#icon-yonghu"></use>
      </svg>
    </div>
    <div class="input">
      <input type="password" placeholder="请输入密码" v-model="password" />
      <svg class="icon" aria-hidden="true">
        <use xlink:href="#icon-mima"></use>
      </svg>
    </div>
    <div class="input">
      <input type="password" placeholder="请重复密码" v-model="repassword" />
      <svg class="icon" aria-hidden="true" v-if="!err">
        <use xlink:href="#icon-zhongfu"></use>
      </svg>
      <svg class="icon errclass" aria-hidden="true" v-if="err">
        <use xlink:href="#icon-V"></use>
      </svg>
    </div>
    <div class="btn">
      <button @click="register">注册</button>
    </div>
    <div class="success" v-if="ifsuccess">注册成功,2秒返回登录界面</div>
  </div>
</template>

<script>
import { regUser } from "@/api/api.js";
export default {
  data: function () {
    return {
      email: "",
      password: "",
      repassword: "",
      name: "",
      err: false,
      ifsuccess: false,
      emailErr: false,
    };
  },
  methods: {
    // gotoLogin:function(){
    //     this.$router.push("/login")
    // },
    register: async function () {
      let result;
      if (
        this.email != "" &&
        this.name != "" &&
        this.password != "" &&
        this.repassword != ""
      ) {
        if (this.repassword == this.password) {
          this.emailErr = false;
          this.err = false;
          result = await regUser(this.email, this.name, this.password);
          if (result.data.result == false) {
            this.emailErr = true;
          } else {
            this.emailErr = false;
            this.ifsuccess = true;
            if (this.ifsuccess) {
              let btn = document.querySelector("button");
              btn.style.marginBottom = "0.2rem";
            } else {
              let btn = document.querySelector("button");
              btn.style.marginBottom = "1.7rem";
            }
            setTimeout(() => {
              this.$router.push("/login");
            }, 2000);
          }
        } else {
          this.err = true;
          this.repassword = "";
        }
      } else {
        this.err = false;
        this.emailErr = true;
      }
    },
  },
};
</script>

<style lang="less">
.register {
  min-width: 7.5rem;
  min-height: 100vh;
  background-color: #f5f6fa;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  span {
    letter-spacing: 0.1rem;
    padding-left: 0.1rem;
    text-align: justify;
    margin-top: 1rem;
    margin-bottom: 1rem;
    font-weight: bold;
    color: #192a56;
  }
  .input {
    position: relative;
    margin-bottom: 0.5rem;
    input {
      width: 5rem;
      height: 1rem;
      border: none;
      background-color: #f5f6fa;
      outline: none;
      border: solid 0.04rem #273c75;
      border-radius: 0.5rem;
      padding-left: 0.4rem;
      padding-right: 1rem;
      overflow: hidden;
      font-size: 0.4rem;
      color: #273c75;
    }
    input::-webkit-input-placeholder {
      color: #7f8fa6;
    }
    .icon {
      width: 0.4rem;
      height: 0.4rem;
      fill: #273c75;
      position: absolute;
      right: 0.4rem;
      top: 0.3rem;
    }
    .errclass {
      fill: #bf3030;
    }
    .emailerr {
      fill: #bf3030;
    }
  }
  .btn {
    margin-top: 0.3rem;
    button {
      width: 5rem;
      height: 1rem;
      border: none;
      background-color: #273c75;
      color: white;
      font-size: 0.5rem;
      letter-spacing: 0.2rem;
      padding-left: 0.2rem;
      border-radius: 0.5rem;
      outline: none;
      margin-bottom: 1.7rem;
    }
  }
  .success {
    letter-spacing: 0.05rem;
    padding-left: 0.05rem;
    margin-top: 0.2rem;
    margin-bottom: 1.7rem;
    font-size: 0.3rem;
    color: #273c75;
  }
}
</style>